<template>
  <div>
    <div class="wrapper" v-for="product in products" :key="product.id">
      <div class="imageWrapper">
        <img :src="product.small_image" />
      </div>
      <div class="contentWrapper">
        <div class="titleWrapper">
          <div class="title">{{ product.product_name }}</div>
          <div class="jianjie">{{ product.spec}}</div>
        </div>

        <div class="priceWrapper">
          <span class="price">{{ product.price | moneyFormat}}</span>
          <span class="cartIcon glyphicon glyphicon-shopping-cart" @click="addToCart(product)"></span>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
// 引入消息订阅插件
// import PubSub from "pubsub-js";

// 引用vuex 替代 PubSub
import { mapMutations, mapState } from "vuex";
import { Toast } from "vant";
import { addGoodsToCart } from "./../../../service/api/index";

export default {
  name: "ProductItem",
  props: {
    products: Array
  },
  computed: {
    ...mapState(["userInfo"])
  },
  methods: {
    // addToCart(goods) {
    //   PubSub.publish("categoryAddToCart", goods);
    // },
    ...mapMutations(["ADD_GOODS"]),
    async addToCart(goods) {
      if (this.userInfo.token) {
        // 已经登录
        //添加到服务器
        let result = await addGoodsToCart(
          this.userInfo.token,
          goods.id,
          goods.name,
          goods.price,
          goods.small_image
        );
        // console.log(result);
        //添加到本地
        if (result.success_code === 200) {
          this.ADD_GOODS({
            goodsId: goods.id,
            goodsName: goods.name,
            smallImage: goods.small_image,
            goodsPrice: goods.price
          });
          // 提示用户
          Toast({
            message: "添加到购物车成功！",
            duration: 800
          });
        }
      } else {
        this.$router.push("/login");
      }
    }
    // addToCart(goods) {
    //   this.ADD_GOODS({
    //     goodsId: goods.id,
    //     goodsName: goods.name,
    //     smallImage: goods.small_image,
    //     goodsPrice: goods.price
    //   });

    //   // 提示用户
    //   Toast({
    //     message: "添加购物车成功!",
    //     duration: 800
    //   });
    // }
    // beforeDestroy() {
    //   //使用订阅要设置取消,不然会有BUG
    //   PubSub.unsubscribe("homeAddToCart");
    // }
  }
};
</script>


<style lang="less" scoped>
.wrapper {
  width: 100%;
  height: 8rem;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #999;

  .imageWrapper {
    width: 25%;
    text-align: center;

    img {
      margin-top: 1rem;
      width: 100%;
    }
  }

  .contentWrapper {
    width: 74%;
    padding: 0.5rem 0.5rem 0.5rem 1rem;

    .title {
      width: 100%;
      color: #666;
      font-size: 1.6rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .jianjie {
      font-size: 1rem;
      color: #999;
      opacity: 0.8;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .priceWrapper {
      position: relative;
      display: flex;
      justify-content: space-between;
      margin-top: 1rem;
      // background-color: red;

      .price {
        padding-top: 0.3rem;
        margin-left: 1rem;
        top: 0.5rem;
        color: #fe6263;
      }

      .cartIcon {
        // position: absolute;
        right: 1rem;
        padding: 0.5rem;
        color: #fff;
        background-color: #3cb963;
        border-radius: 50%;
      }
    }
  }
}
</style>